<template>
  <div>
    <!-- 附件详情Drawer -->
    <el-drawer :visible.sync="detailDrawer" direction="rtl" destroy-on-close title="附件详情">
      <div class="content">
        <div style="margin-bottom: 16px">
          <a :href="baseUrl+data.path" target="_blank">
            <v-image :src="baseUrl+data.thumbPath" :alt="data.name" class="thumbnail">
              <div slot="error">
                <i v-if="isImage" class="el-icon-picture-outline" style="font-size: 86px"/>
                <span v-else>{{ data.mediaType }}</span>
              </div>
            </v-image>
          </a>
        </div>
        <el-form label-position="top" :model="data" size="small" class="att-detail">
          <el-form-item label="附件名：">
            <i class="operate el-icon-edit-outline" @click="editing = !editing"/>
            <el-input v-if="editing" v-model="data.name" @blur="updateAttachment"/>
            <span v-else>{{ data.name }}</span>
          </el-form-item>
          <el-divider/>
          <el-form-item label="附件类型：">{{ data.mediaType }}</el-form-item>
          <el-divider/>
          <el-form-item label="附件大小：">{{ getSizeKB }}</el-form-item>
          <el-divider/>
          <el-form-item v-if="data.width > 0 || data.height > 0" label="图片尺寸：" class="form_item">
            {{ data.width + ' x ' + data.height }}
            <el-divider/>
          </el-form-item>
          <el-form-item label="上传时间：">{{ data.created }}</el-form-item>
          <el-divider/>
          <el-form-item label="附件链接：">
            <i class="operate el-icon-document-copy" style="left: 70px" @click="copyNormalUrl"/>
            <div class="urlText">{{ normalUrl }}</div>
          </el-form-item>
          <el-divider v-if="isImage"/>
          <el-form-item v-if="isImage" label="Markdown链接：" style="margin-bottom: 10px">
            <i class="operate el-icon-document-copy" style="left: 105px" @click="copyMarkdownUrl"/>
            <div class="urlText">{{ markdownUrl }}</div>
          </el-form-item>
        </el-form>
      </div>

      <div class="footer-toolbar" style="width: 30%">
        <el-popconfirm
            placement="top-start"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            :title="`您要永久删除附件【${data.name}】吗？`"
            @confirm="deleteAttachment"
        >
          <el-button slot="reference" type="danger" size="medium">删 除</el-button>
        </el-popconfirm>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {deleteAttachment, updateAttachmentName} from "@/api/blog/attachment";
import image from "@/components/common/simple-image";

export default {
  name: "AttachmentDetail",
  components: {"v-image": image},
  data() {
    return {
      detailDrawer: false,
      data: {},
      editing: false,
    }
  },
  computed: {
    isImage() {
      const mediaType = this.data.mediaType || ''
      return mediaType.search('image') !== -1
    },
    normalUrl() {
      // return `${this.getServerUrl}${this.data.path}`
      return this.host + this.data.path
    },
    markdownUrl() {
      return `![${this.data.name}](${this.normalUrl})`
    },
    getSizeKB() {
      const sizeByte = this.data.size || 0
      return (sizeByte / 1024).toFixed(2) + ' KB'
    },
    getServerUrl() {
      return this.$store.state.serverInfo.server_url
    }
  },
  methods: {
    copyNormalUrl() {
      this.copyToClipboard(encodeURI(this.normalUrl))
    },
    copyMarkdownUrl() {
      const md = `![${this.data.name}](${encodeURI(this.normalUrl)})`
      this.copyToClipboard(md)
    },
    copyToClipboard(text) {
      this.$copyText(text)
          .then(message => {
            this.$message.success('复制成功')
          })
          .catch(err => {
            console.log(err)
            this.$message.error('复制失败')
          })
    },
    //提供父组件调用
    openDrawer() {
      this.detailDrawer = true
    },
    setData(data) {
      this.data = data;
      this.host = window.location.protocol + '//' + window.location.host + process.env.VUE_APP_BASE_API
    },
    deleteAttachment() {
      const params = {id: this.data.id}
      deleteAttachment(params).then(res => {
        this.detailDrawer = false
        this.$emit("handle", res)
      })
    },
    //更新标题
    updateAttachment() {
      const data = {
        id: this.data.id,
        name: this.data.name
      }
      updateAttachmentName(data).then(res => {
        this.$message.success(res.message)
        this.editing = false
        this.$emit("handle", res)
      }).catch(err => {
        this.detailDrawer = false
      })
    }
  },

}
</script>

<style scoped>
.content {
  /*padding: 24px;*/
  padding: 0 20px 70px 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-detail {
  color: #606266;
}

.att-detail >>> .el-form-item__label {
  padding: 0;
}

.att-detail .operate {
  color: #409eff;
  position: absolute;
  top: -22px;
  left: 55px;
  cursor: pointer;
}

.att-detail .urlText {
  line-height: 22px;
  white-space: normal;
  word-break: break-all;
}

.thumbnail {
  border-radius: 5px;
  overflow: hidden;
}

.footer-toolbar {
  z-index: 2000;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 56px;
  line-height: 56px;
  padding: 0 24px;
  background-color: #fff;
  border-top: 1px #e8e8e8 solid;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .03);
  text-align: right;
}
</style>
